import React, {useRef} from "react";
import type {FormProps} from "antd";
import {Button, Checkbox, Form, Input} from "antd";
import {useNavigate} from "react-router-dom";

type FieldType = {
    phone?: string;
    code?: string;
    password?: string;
    password2?: string;
    agree?: boolean;
};


const App: React.FC = () => {
    const navigate = useNavigate();
    const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
        console.log(values)
    };
    const login = () => {
        navigate("/login");
    };
    return (
        <Form
            name="basic"
            initialValues={{remember: true}}
            onFinish={onFinish}
            autoComplete="off"
        >
            <Form.Item<FieldType>
                label="手机号"
                name="phone"
                rules={[{required: true, message: "请输入手机号"}]}
            >
                <Input placeholder="请输入手机号"/>
            </Form.Item>

            <Form.Item<FieldType>
                label="验证码"
                name="code"
                rules={[{required: true, message: "请输入验证码"}]}
            >
                <div className="flex *:mr-2">
                    <Input placeholder="请输入验证码"/>
                    <Button type="primary">获取验证码</Button>
                </div>
            </Form.Item>

            <Form.Item<FieldType>
                label="新密码"
                name="password"
                rules={[{required: true, message: "请输入新密码"}]}
            >
                <Input.Password placeholder="请输入新密码"/>
            </Form.Item>

            <Form.Item<FieldType>
                label="确认密码"
                name="password2"
                rules={[{required: true, message: "请输入新密码"}]}
            >
                <Input.Password placeholder="请再次输入新密码"/>
            </Form.Item>

            <Form.Item<FieldType>
                label=""
                name="agree"
                rules={[{required: true, message: "还未同意哦"}]}
            >
                <div className={'flex *:mr-1'}>
                    <Checkbox/>
                    <div>
                        我同意
                        <span className="text-blue-500">《饭盟智慧云SaaS餐饮服务平台》注册协议</span>
                    </div>
                </div>
            </Form.Item>

            <div className="w-400px mt-5 flex justify-center">
                <Button type="primary" className="w-full h-10" htmlType="submit">
                    确定
                </Button>
            </div>
            <div
                onClick={login}
                className="text-end text-blue-500 mt-2 cursor-pointer"
            >
                返回登录
            </div>
        </Form>
    );
};

export default App;
